import React, { useState } from 'react';
import GopherProps from '../objects/internal/GopherProps';
import { Button, Card, DatePicker, Form } from 'antd';
import { useTranslation } from 'react-i18next';
import AsyncCitySelector from './AsyncCitySelector';
import OrderStateSelector from './OrderStateSelector';
import { OrderFilterCondition } from '../objects/internal/OrderFilterCondition';
import * as moment from 'moment';
import { OrderState } from '../objects/internal/OrderState';

export interface OrderFilterProps extends GopherProps {
	onSubmitButtonPressed: (filter: OrderFilterCondition) => void;

	keepAllOptions?: boolean;
	loading?: boolean;
}

export default function OrderFilter(props: OrderFilterProps) {
	const {t} = useTranslation();
	const [city, setCity] = useState('全部');
	const [orderState, setOrderState] = useState('any');
	const [range, setRange] = useState<(moment.Moment | null)[]>([]);

	const onSubmitPress = () => {
		const out: OrderFilterCondition = {
			city: city,
			fromTime: range[0]?.toDate() || new Date(0),
			toTime: range[1]?.toDate() || new Date(),
			orderState: orderState as OrderState,
		};

		props.onSubmitButtonPressed(out);
	};

	return (
		<Card>
			<Form layout={'inline'} name={'order-filter'} id={'order-filter'}>
				<Form.Item label={t('label-city')}>
					<AsyncCitySelector gopher={props.gopher} onChange={x => setCity(x)} keepAllOption={props.keepAllOptions} />
				</Form.Item>
				<Form.Item label={t('label-timespan')}>
					<DatePicker.RangePicker showTime onChange={x => setRange(x || [])}/>
				</Form.Item>
				<Form.Item label={t('label-order-state')}>
					<OrderStateSelector onChange={x => setOrderState(x)}/>
				</Form.Item>
				<Form.Item>
					<Button loading={props.loading} type={'primary'} htmlType={'submit'} onClick={onSubmitPress}>{t('button-query')}</Button>
				</Form.Item>
			</Form>
		</Card>
	);
}
